<template>
  <div>
    <el-dialog title="OCR录入" :visible.sync="dialogVisible" width="70%" :before-close="handleClose" :close-on-click-modal="false">
      <div>
        <el-row>
          <el-col :span="24">
            选择文件:
            <input type="file" name="file" @change="getFile" />
            <el-button type="primary" @click="upload">上传</el-button>
            <el-button type="primary" @click="read">提取</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px" :gutter="20">
          <el-col :span="12">
            <div @click="dialogContractVisible = true">
              pdf预览：
              <pdf ref="pdf" :src="pdfUrl" :page="1"></pdf>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form class :model="formData" size="small" ref="formData">
                <el-form-item label="承租方名称:">
                  <el-input v-model="formData.clientLesseeName"></el-input>
                </el-form-item>
                <el-form-item label="证件类型:">
                  <br />
                  <el-select v-model="formData.certificateType">
                    <el-option key="1" label="身份证" value="1" />
                    <el-option key="2" label="统一社会信用代码" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="证件号码:">
                  <el-input v-model="formData.certificateNum"></el-input>
                </el-form-item>
                <el-form-item label="详细地址:">
                  <el-input v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                  <el-input v-model="formData.telephone"></el-input>
                </el-form-item>
                <el-form-item label="物业名称:">
                  <el-input v-model="formData.propertyNames"></el-input>
                </el-form-item>
                <el-form-item label="建筑面积:">
                  <br />
                  <el-input-number v-model.number="formData.buildingArea" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="月租金:">
                  <br />
                  <el-input-number v-model.number="formData.rentAmount" :min="0"></el-input-number>
                </el-form-item>
                <br />
                <el-form-item label="收费方式:">
                  <br />
                  <el-select v-model="formData.feeType" placeholder="请选择">
                    <el-option v-for="item in rentFeeType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="合同开始日期" prop="startDate">
                  <br />
                  <el-date-picker v-model="formData.startDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="合同结束日期" prop="endDate">
                  <br />
                  <el-date-picker v-model="formData.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="装修免租期" prop="freeFees">
                  <br />
                  <el-date-picker v-model="freeFees" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="起租日期" prop="rentStartDate">
                  <br />
                  <el-date-picker v-model="formData.rentStartDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="押金:">
                  <br />
                  <el-input-number v-model.number="formData.proFeeAmount" :min="0"></el-input-number>
                </el-form-item>
              </el-form>
              <div class="card-title">租金标准</div>
              <el-row>
                <el-col :span="24" align="right">
                  <el-button type="primary">添加区间</el-button>
                </el-col>
              </el-row>
              <el-form>
                <el-table :data="rentFeeInformation" stripe align="center" style="width: 100%">
                  <el-table-column prop="startDate" align="center" label="开始时间" width="100">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-date-picker v-model="scope.row.startDate" type="date" value-format="yyyy-MM-dd" placeholder="选择开始日期"></el-date-picker>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="endDate" align="center" label="结束时间" width="100">
                    <template slot-scope="scope">
                      <el-date-picker v-model="scope.row.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择结束日期"></el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column prop="priceFinal" label="月租金" align="center" width="100">
                    <template slot-scope="scope">
                      <el-input-number v-model.number="scope.row.priceFinal" :min="0"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column width="100" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-link @click.stop="deleteFeeInformation(scope.$index)">删除</el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" v-throttle="[ok]">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script src="./ocr-add.js"></script>
<style scoped lang="scss">
@include formWrap();
</style>
